<template>
  <div class="scanCode">
    <div class="container">
      <div class="qrcode">
        <div style="width: 100vw;" id="reader"></div>
      </div>
    </div>
    <div class="btn">
      <div class="left-back">
        <el-icon @click="clickBack">
          <ArrowLeft />
        </el-icon>
      </div>
      <div class="right-file">
        <van-uploader v-model="state.fileList" :preview-image="false" :after-read="dealSelectFiles">
          <van-icon name="photo-o" />
        </van-uploader>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { Html5Qrcode } from "html5-qrcode"
import { onUnmounted } from "vue";
let emit = defineEmits(['clickBack', 'qrCodeSuccess'])
const state = reactive({
  html5QrCode: null,
  fileList: []
})
let html5QrCode: Html5Qrcode = null;
let clickBack = () => {
  emit('clickBack')
}
// // 扫码成功的回调
const qrCodeSuccessCallback = res => {
  console.log('成功', res)
  emit('qrCodeSuccess', res)
  stop()
}
// 使用相机扫码
const getCamerasD = () => {
  Html5Qrcode.getCameras()
    .then((devices) => {
      if (devices && devices.length) {
        html5QrCode = new Html5Qrcode('reader')
        startss(devices)
      }
    })
    .catch((err) => {
      alert('摄像头无访问权限')
    })
}
// defineExpose({ getCamerasD });
getCamerasD()
const startss = (devices) => {
  const config = {
    fps: 10, //  二维码扫描每秒帧数
    qrbox: { width: 300, height: 300 }, // UI框的大小
  }
  if (devices && devices.length) {
    html5QrCode.start({ facingMode: 'environment' }, config, qrCodeSuccessCallback)
      .catch((err) => {
        let message = ''
        // 错误信息处理仅供参考，具体描述自定义
        if (typeof err == 'string') {
          message = $t('message.identifyFailed') + '！'
        } else {
          if (err.name == 'NotAllowedError') {
            message = '您需要授予相机访问权限！'
          }
          if (err.name == 'NotFoundError') {
            message = '这个设备上没有摄像头！'
          }
          if (err.name == 'NotSupportedError') {
            message = '摄像头访问只支持在安全的上下文中，如https或localhost！'
          }
          if (err.name == 'NotReadableError') {
            message = '相机被占用！'
          }
          if (err.name == 'OverconstrainedError') {
            message = '安装摄像头不合适！'
          }
          if (err.name == 'StreamApiNotSupportedError') {
            message = '此浏览器不支持流API！'
          }
        }
      })
  }
}
const dealSelectFiles = () => {
  try {
    window.qrcode.callback = (result) => {
      alert('成功了，结果是：' + result)
    }
    // get select files.
    let file = state.fileList[0].file
    var reader = new FileReader()
    reader.onload = (function () {
      return function (e) {
        window.qrcode.decode(e.target.result)
      }
    })(file)
    reader.readAsDataURL(file)
  } catch (error) {
    alert('图片识别失败！')
  }
}
onUnmounted(() => {
  //扫描设备是否在运行
  if (html5QrCode.isScanning) {
    stop()
  }
})
const stop = () => {
  html5QrCode.stop()
    .then((ignore) => {
      console.log('停止扫码', ignore)
    })
    .catch((err) => {
      console.log(err)
      alert('停止扫码失败')
    })
}
</script>
<style lang="scss" scoped>
.scanCode {
  position: fixed;
  flex-direction: column;
  background: rgba(0, 0, 0);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: 1000;
}

.container {
  height: 90vh;
  position: relative;
  width: 100%;
}

.qrcode {
  height: 100%;
}

#reader {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.btn {
  flex: 1;
  padding: 3vw;
  display: flex;
  justify-content: space-around;
  color: #fff;
  font-size: 8vw;
  align-items: flex-start;
}
</style>